<template>
	<view class="main recharge-main">
		<NavigationBar title="余额充值" />
		<view class="scroll-wrap">
			<div class="recharge-content">
				<view class="title">充值金额</view>
				<view class="price-list">
					<view :class="['price-item flex-center round',{'p-active': priceIndex==index}]" 
					v-for="(item,index) in priceList" @click="selectedPriceAction(index)">
						<text>{{item}}元</text>
					</view>
				</view>
				<view class="input-price">
					<text class="label">其它金额</text>
					<input class="uni-input" type="number" maxlength="5" :value="price" @input="onKeyInput" placeholder-class="placeholder" placeholder="请输入其它金额" />
				</view>
				<view class="title">选择支付方式</view>
				<view class="payment-method">
					<view class="cell b-b" @click="selectedPayAction(0)">
						<text class="iconfont wxpay-icon">&#xe607;</text>
						<text class="pay-name">微信支付</text>
						<text class="iconfont selected-icon" v-if="payIndex==0">&#xe6a7;</text>
					</view>
					<view class="cell b-b" @click="selectedPayAction(1)">
						<text class="iconfont zfbpay-icon">&#xe612;</text>
						<text class="pay-name">支付宝</text>
						<text class="iconfont selected-icon" v-if="payIndex==1">&#xe6a7;</text>
					</view>
				</view>
			</div>
			<view class="submit-btn-wrap">
				<view class="submit-btn flex-center" @click="submitAction">
					<text class="btn-text">确认充值</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		data() {
			return {
				priceIndex: 0,
				priceList: [50,100,200,500,1000,99999],
				payIndex: 0,
				price: '',
				payPrice: 0
			};
		},
		onLoad() {
			const _this:any = this
			_this.selectedPriceAction(0)
		},
		methods: {
			selectedPriceAction(index:any) {
				const _this:any = this
				_this.price = ''
				_this.priceIndex = index
				_this.payPrice = _this.priceList[index]
			},
			onKeyInput(e: any) {
				const _this:any = this
				let value = Number(e.target.value)
				_this.price = value
				_this.payPrice = value
				_this.priceIndex = -1
			},
			selectedPayAction(index: any) {
				const _this:any = this
				_this.payIndex = index
			},
			submitAction() {
				const _this:any = this
				console.log(_this.payPrice)
				_this.$util.goBack()
			}
		}
	}
</script>

<style lang="scss">
	@import './recharge.scss'
</style>
